<template>
  <div>
    <v-app-bar app flat>
      <!-- -->
      <v-container class="py-1">
        <v-layout>
          <v-img
            :src="require('@/assets/logo.png')"
            class="mr-5"
            contain
            style="cursor:pointer;"
            height="48"
            width="48"
            max-width="48"
            @click="home()"
          />
          <span class="my-auto title text-no-wrap" style="color:#2A5082;"
            >友聊</span
          >
          <v-tabs
            id="app-bar-tabs"
            background-color="transparent"
            class="ml-12"
          >
            <v-tab
              class="ml-0 hidden-sm-and-down subtitle-1"
              @click="$router.push('/')"
              >首页</v-tab
            >
            <v-tab
              class="ml-0 hidden-sm-and-down subtitle-1"
              @click="$router.push('/explore')"
              >发现</v-tab
            >
            <v-tab
              v-if="name"
              class="ml-0 hidden-sm-and-down subtitle-1"
              @click="$router.push('/link')"
              >友链</v-tab
            >
            <v-tab
              class="ml-0 hidden-sm-and-down subtitle-1"
              @click="$router.push('/about')"
              >关于</v-tab
            >
          </v-tabs>
          <v-btn icon color="gray" @click="$router.push('/search')">
              <v-icon>fa-search</v-icon>
            </v-btn>
          <!-- <v-text-field
            append-icon="mdi-magnify"
            flat
            hide-details
            solo-inverted
            label="搜索"
            v-model="key"
            @click:append="search"
            class="hidden-sm-and-down"
          /> -->
          <v-btn
            v-if="!name"
            class="ml-auto my-auto"
            text
            @click="login = true"
          >
            登录
          </v-btn>
          <v-btn
            v-if="!name"
            class="ml-1 my-auto"
            color="primary"
            @click="register = true"
          >
            注册
          </v-btn>
          <!-- <v-btn v-if="name" class="ml-1 my-auto" text>{{ name }}</v-btn> -->
          <v-menu v-if="name" open-on-hover offset-y>
            <template v-slot:activator="{ on }">
              <!-- <v-btn class="ml-1 my-auto" text v-on="on">
                {{ name }}
              </v-btn> -->
              <v-avatar class="ml-6 my-auto pr-2" size="36" style="cursor:pointer;">
                <img v-on="on" :src="user.profile_pic" :alt="user.name" />
              </v-avatar>
            </template>
            <v-list>
              <v-list-item @click="$router.push('/setting/account')">
                <v-list-item-title>设置</v-list-item-title>
              </v-list-item>
              <v-list-item @click="$router.push('/follow')">
                <v-list-item-title>关注列表</v-list-item-title>
              </v-list-item>
              <v-list-item @click="$router.push('/myarticle')">
                <v-list-item-title>我的文章</v-list-item-title>
              </v-list-item>
              <v-list-item @click="$router.push('/edit')">
                <v-list-item-title>发表文章</v-list-item-title>
              </v-list-item>
              <v-list-item @click="$router.push('/mycomment')">
                <v-list-item-title>我的评论</v-list-item-title>
              </v-list-item>
              <v-list-item @click="logout">
                <v-list-item-title>退出</v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>
          <!-- <v-btn
            v-if="name"
            class="ml-1 my-auto"
            color="primary"
            @click="logout"
          >
            退出
          </v-btn> -->
        </v-layout>
        <v-divider></v-divider>
      </v-container>
    </v-app-bar>
    <register v-if="register" @close="close" @register="register_success" />
    <login v-if="login" @close="close" @login="login_success" />
    <v-snackbar
      v-model="snackbar"
      :bottom="y === 'bottom'"
      :color="color"
      :left="x === 'left'"
      :multi-line="mode === 'multi-line'"
      :right="x === 'right'"
      :timeout="timeout"
      :top="y === 'top'"
      :vertical="mode === 'vertical'"
    >
      {{ text }}
      <v-btn color="white" text @click="snackbar = false">
        Close
      </v-btn>
    </v-snackbar>
  </div>
</template>
<script>
export default {
  components: {
    Register: () => import("@/components/Register"),
    Login: () => import("@/components/Login")
  },
  created() {
    this.fetchUser();
  },
  methods: {
    toggleDrawer() {
      this.drawer = !this.drawer;
    },
    to(target) {
      global.console.log(target);
      this.$router.push(target);
    },
    close(data) {
      this.register = data;
      this.login = data;
      this.name = localStorage.getItem("name");
    },
    register_success(data) {
      this.text = "注册成功";
      this.snackbar = data;
    },
    login_success(data) {
      console.log(data)
      this.$toast({
            text: "登录成功",
            type: "success",
            duration: 3000
          });
      this.fetchUser()
    },
    logout() {
      localStorage.clear();
      this.name = undefined;
    },
    home(){
      this.$router.push('/')
    },
    async fetchUser() {
      try {
        if (localStorage.token) {
          const res = await this.$http.get(
            `user_profile/?username=${localStorage.getItem("name")}`
          );
          this.user = res.data.list[0].fields;
          if(this.user.profile_pic === null){
            this.user.profile_pic = require("@/assets/bar/other.jpg");
          }else{
            this.user.profile_pic = require(this.user.profile_pic);
          }
        }else{
          this.links[2].show = false
        }
      } catch (e) {
        console.log("图片获取失败");
      }
    }
  },

  data: () => ({
    drawer: false,
    name: localStorage.getItem("name"),
    key: "",
    user: {},
    items: [
      { title: "Dashboard", icon: "mdi-view-dashboard" },
      { title: "Photos", icon: "mdi-image" },
      { title: "About", icon: "mdi-help-box" }
    ],
    right: null,
    register: false,
    login: false,
    color: "success",
    mode: "",
    snackbar: false,
    text: "",
    timeout: 2000,
    x: null,
    y: "top"
  }),
  computed: {
    linkList(){
      const links = this.links.filter(link =>
        link.show === true
      )
      return links
    }
  },
  watch: {
    $route() {
      setTimeout(() => {
        let appTabSelect =
          document
            .getElementById("app-bar-tabs")
            .getElementsByClassName("v-tab--active").length == 0;
        if (appTabSelect) {
          document
            .getElementById("app-bar-tabs")
            .getElementsByClassName(
              "v-tabs-slider-wrapper"
            )[0].style.visibility = "hidden";
        } else {
          document
            .getElementById("app-bar-tabs")
            .getElementsByClassName(
              "v-tabs-slider-wrapper"
            )[0].style.visibility = "visible";
        }
      }, 100);
    }
  }
};
</script>
<style lang="scss" scoped>
.title:hover {
  color: white;
}
</style>
